<template>
  <div>
    <van-list
      ref="vantList"
      class="vanList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item.cj_uid" :title="item.cj_phone|filterPhone"  :value="item.it_title" /> -->
      <div class="re-list" v-for="(item,index) in list" :key="index">
        <div class="re-name">{{item.cj_phone|filterPhone}}</div>
        <div class="re-title">{{item.it_title}}</div>
      </div>
    </van-list>
  </div>
</template>

<script>
  export default {
    name:'rewardList',
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page:0,
        pages:3,//总页数
        page_size:10,
        list:[],
      }
    },
    computed: {
      cj_id(){//抽奖,TODO去掉写死的
        return this.$route.query["cj_id"];
      },
    },
    filters:{
      filterPhone(val){
        return val&&val.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      },
    },
    
    created () {
      
    },
    mounted () {
      this.autoScoll()
    },
    methods: {
      onLoad() {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
      if(this.page>=this.pages){
          this.finished = true;
          // this.$toast('已经全部加载')
          return;
      }
      this.getLuckdrawWinnersList()
      this.page++

      },
      autoScoll(){
        let list=document.querySelector('.reward-list')
        // if(list.scrollHeight - list.scrollTop === list.clientHeight){
        //   clearInterval(timer)
        // }
        // if(this.finished==true){
        //   list.scrollTop=0
        //   this.finished=false
        // }
        let timer=setInterval(() => {
          list.scrollTop+=1
          
        }, 30);
        this.$once('hook:beforeDestroy',()=>{
          clearInterval(timer)
        })
        
        
      },
      getLuckdrawWinnersList(){
        this.$http({
          method: "get",
          url: this.$http.adornUrl(`luckdraw/index/getLuckdrawWinnersList`, "proxyXlh"),
          params:{
            cj_id:this.cj_id,
            page:this.page,
            page_size:this.page_size
          }
        }).then(res=>{
          if(res.data.code==200){
            let {page,pages}=res.data.pageparam
            this.pages=Number(pages)||0
            this.list=this.list.concat(res.data.data) 
            this.loading = false;
          }
        })
    },
      
    }
  }
</script>

<style  scoped>
.vanList{
  padding: 20px;
}
.re-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 22px;
  font-weight: bold;
}
.re-name{
  color: #fff;
}
.re-title{
  color: #ffe823;
}
</style>